<template>
  <div class="wrapper">
    <div>
      <!-- 头部 -->
      <div>
        <Select>
          <!-- 收藏 -->
          <template v-slot:love>
            <div class="love">
              <span><img src="../assets/images/星星.png" alt="" /></span>
              <span>收藏</span>
              <span>({{ $store.state.select_acchor_data.subCount }})</span>
            </div>
          </template>
          <!-- 下载全部 -->
          <template v-slot:all_xz>
            <div class="love">
              <span><img src="../assets/images/下载.png" alt="" /></span>
              <span>全部下载</span>
            </div>
          </template>
          <!-- 标签 -->
          <template
            v-slot:tags
            v-if="
              $store.state.select_acchor_data.tags.length === 0 ? false : true
            "
          >
            <div class="tags">
              <span class="tag_title">标签 : </span>
              <span
                class="tag_item tag_name"
                v-for="(item, index) in $store.state.select_acchor_data.tags"
                :key="index"
              >
                {{ item }}
              </span>
            </div>
          </template>
          <!-- 歌曲数量  和播放数量 -->
          <template v-slot:count>
            <div class="count">
              <span>歌曲 : </span>
              <span class="song_count">{{
                $store.state.select_acchor_data.trackCount
              }}</span>
              <span>播放 : </span>
              <span class="play_count">{{
                $store.state.select_acchor_data.playCount
              }}</span>
            </div>
          </template>
          <!-- 简介 -->
          <template v-slot:introduce>
            <div v-if="$store.state.select_acchor_data.desc" class="el-icon-caret-bottom" @click="show_fn"></div>
            <div
              class="introduce"
              :style="
                show ? '-webkit-line-clamp: 2' : '-webkit-line-clamp: 1000'
              "
            >
              <div
                class="wenzi"
                v-for="(item, index) in $store.state.select_acchor_data.desc"
                :key="index"
              >
                {{ item }}
              </div>
            </div>
          </template>
        </Select>
      </div>

      <!-- loading加载 -->
      <div v-if="loading">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 1)"
          style="width: 100%"
        >
        </el-table>
      </div>

      <!-- 内容区 -->
      <div class="music_content" v-else>
        <!-- 排序 -->
        <div class="sorting">
          <h3>歌曲列表</h3>
          <div
            v-if="
              this.$store.state.select_acchor_data.leixing === 'phb'
                ? false
                : true
            "
          >
            <span class="order">时长:</span>
            <span
              class="positive_order"
              :class="asc ? '' : 'active'"
              @click="positive_order_fn()"
              >正序</span
            >
            <span
              class="inverted_order"
              :class="asc ? 'active' : ''"
              @click="inverted_order_fn()"
              >倒序</span
            >
          </div>
        </div>
        <!-- 音乐tou -->
        <div class="songlist_title">
          <!-- 序号 -->
          <div class="name">音乐标题</div>
          <div class="song_name">歌手</div>
          <div class="songs">专辑</div>
          <div class="play_time">时长</div>
        </div>
        <!--音乐 -->
        <div class="music">
          <div
            class="songlist"
            :class="$store.state.src_id === item.id ? 'active' : ''"
            v-for="(item, index) in $store.state.song_music_list"
            :key="index"
            @click="play_music(item)"
          >
            <!-- 序号 -->
            <div class="index_name">
              <!-- 下标 -->
              <div class="index">{{ index + 1 }}</div>
              <!-- 音乐标题 -->
              <div class="name">{{ item.name }}</div>
            </div>
            <!-- 歌手名字 -->
            <div class="song_name">{{ item.ar[0].name }}</div>
            <!-- 专辑 -->
            <div class="songs">{{ item.al.name }}</div>
            <!-- 时长 -->
            <div class="play_time">{{ item.playtime }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Select from "../components/Select.vue";
export default {
  name: "Songdetails",
  components: {
    Select,
  },
  data() {
    return {
      // 显示loading
      loading: true,
      // 显示 简介
      show: true,
      // 选择正序倒序
      asc: false,
    };
  },
  mounted(){
    this.loading = false;
  },
  created() {
    if (this.$store.state.select_acchor_data.leixing === "phb") {
      console.log("2222");
      this.get_toplist_music_detail();
    } else{
      this.song_lise();
    }

    

    // this.axios({
    //   method: "get",
    //   url: "/simi/artist",
    //   params: {
    //     id: "6452",
    //   },
    // }).then((res) => console.log("res",res)).catch(err =>{
    //   console.log(err);
    // })
  },
  methods: {
    //   显示简介
    show_fn() {
      this.show = !this.show;
    },

    // 歌单的音乐列表
    song_lise() {
      // 获取到id
      let ids = [];
      this.$store.state.select_acchor_data.trackIds.forEach((v) => {
        ids.push(v.id);
      });
      ids = ids.join();

      // 获取到歌曲的详情信息
      this.axios({
        method: "get",
        url: "/song/detail",
        params: {
          ids,
        },
      })
        .then((res) => {
          for (let i = 0; i < res.data.songs.length; i++) {
            res.data.songs[i].playtime = this.hms(res.data.songs[i].dt);
          }
          console.log("我是音乐详情的音乐列表", res);
          let arr = res.data.songs;
          // 遍历数组，次数就是arr.length - 1
          for (var j = 0; j < arr.length - 1; j++) {
            for (var i = 0; i < arr.length - 1; i++) {
              if (arr[i].dt < arr[i + 1].dt) {
                var temp = arr[i];
                arr[i] = arr[i + 1];
                arr[i + 1] = temp;
              }
            }
          }
          this.$store.commit("song_music_list", arr);

          this.loading = false;
        })
        .catch((err) => {
          console.log("我是音乐详情的音乐列表", err);
        });
    },

    // 正序
    positive_order_fn() {
      // 控制高亮
      this.asc = false;
      let arr = this.$store.state.song_music_list;
      // 遍历数组，次数就是arr.length - 1
      for (var j = 0; j < arr.length - 1; j++) {
        for (var i = 0; i < arr.length - 1; i++) {
          if (arr[i].dt < arr[i + 1].dt) {
            var temp = arr[i];
            arr[i] = arr[i + 1];
            arr[i + 1] = temp;
          }
        }
      }
      this.$store.commit("song_music_list", arr);
    },
    // 倒序
    inverted_order_fn() {
      this.asc = true;
      let arr = this.$store.state.song_music_list;
      // 遍历数组，次数就是arr.length - 1
      for (var j = 0; j < arr.length - 1; j++) {
        // 这里 i < arr.length - 1 ，要思考思考合适吗？我们下面继续说
        for (var i = 0; i < arr.length - 1; i++) {
          if (arr[i].dt > arr[i + 1].dt) {
            var temp = arr[i];
            arr[i] = arr[i + 1];
            arr[i + 1] = temp;
          }
        }
      }
      console.log(arr);
      this.$store.commit("song_music_list", arr);
    },

    // 点击歌单列表  进行播放
    play_music(item) {
      let play_info = {
        picUrl: "",
        name: "",
        playTime: "",
        song: {
          alias: [],
          artists: [{ name: "" }],
        },
        id: "",
        type: "music",
      };
      //   图片路劲
      play_info.picUrl = item.al.picUrl;
      //   音乐名称层
      play_info.name = item.name;
      //   播放时间
      play_info.playTime = item.playtime;
      //   播放时间  毫秒形式
      play_info.playTimeS = item.dt;
      //
      play_info.song.alias = "";
      //   歌手名称
      play_info.song.artists[0].name = item.ar[0].name;
      //   音乐的id
      play_info.id = item.id;

      this.$store.commit("musis_info", play_info);
      this.$store.commit("play_list", play_info);
      this.$store.commit("src_id", play_info.id);
      this.$store.dispatch("get_src");

      console.log("item", item);
      console.log(this.$store.state.musis_info);
    },

    // 排行榜列表
    get_toplist_music_detail() {
      this.axios({
        method: "get",
        url: "/playlist/detail",
        params: {
          id: this.$store.state.select_acchor_data.id,
        },
      })
        .then((res) => {
          console.log("我是飙升榜的数据的id", res);

          for (let i = 0; i < res.data.playlist.tracks.length; i++) {
            res.data.playlist.tracks[i].playtime = this.hms(
              res.data.playlist.tracks[i].dt
            );
          }
          console.log("我是音乐详情的音乐列表", res);
          this.$store.commit("song_music_list", res.data.playlist.tracks);
          console.log(res);
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },



    // 格式化时间
    hms(times) {
      let t = "";
      let m =
        Math.floor(times / 1000 / 60) < 10
          ? "0" + Math.floor(times / 1000 / 60)
          : Math.floor(times / 1000 / 60);
      let s =
        Math.floor((times / 1000) % 60) < 10
          ? "0" + Math.floor((times / 1000) % 60)
          : Math.floor((times / 1000) % 60);
      t = `${m}:${s}`;
      return t;
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  height: 670px;
  // background: springgreen;
  overflow-y: auto;
}
.love {
  vertical-align: middle;
  span {
    display: flex;
    align-items: center;
    img {
      height: 28px;
    }
  }
}
.el-table {
  height: 500px;
}

// 排序的样式
.sorting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
  cursor: default;
  .order {
    margin-right: 20px;
  }
  .inverted_order,
  .positive_order {
    padding: 5px 10px;
    cursor: pointer;
  }
  .active {
    background: #e4393c;
    color: #fff;
  }
}

// 音乐头
.songlist_title {
  display: flex;
  text-align: inherit;
  color: #555;
  padding: 10px 0;
  div {
    cursor: default;
  }
  //   background: brown;
  .name {
    flex: 0 50%;
    // background: cornflowerblue;
    padding-left: 100px;
    box-sizing: border-box;
  }
  .song_name {
    flex: 0 15%;
    // background: cornsilk;
  }
  .songs {
    flex: 0 25%;
  }
  .play_time {
    flex: 0 10%;
    // background: crimson;
  }
}

// 音乐
.music {
  .active {
    color: #e4393c !important;
  }
  .songlist {
    padding: 10px 0;
    cursor: default;
    display: flex;
    color: #666;

    .index_name {
      display: flex;
      flex: 0 50%;
      //   background: cornflowerblue;
      box-sizing: border-box;
      .index {
        flex: 0 20%;
        // background: cadetblue;
        text-align: center;
      }
      .name {
        width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .song_name {
      // flex: 0 15%;
      width: 145px;
      //   background: cornsilk;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:hover {
        color: #333;
        cursor: pointer;
      }
    }
    .songs {
      // flex: 0 25%;
      width: 260px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &:hover {
        cursor: pointer;
        color: #333;
      }
    }
    .play_time {
      flex: 0 10%;
      box-sizing: border-box;
      padding-left: 10px;
    }
    &:nth-child(2n-1) {
      background: #f0f0f0;
    }
    &:hover {
      background: #9999;
    }
  }
}
</style>